<template>
  <div ref="contextmenu"
       :class="{hide:!isShow}"
       class="rootNode"
       @mousedown.stop.prevent="{}">
    <div v-for="(item,index) in contextmenu" v-show="item.show"
         @click="itemClick(item,$event)" @mousedown.stop.prevent="{}">
      <img :class="{box_show:item.icon}" :src='item.icon'>
      <span>{{ item.label }}</span>
    </div>
  </div>
</template>
<script>

export default {
  name: 'ContextMenu',
  data () {
    return {
      contextmenu: [],
      isShow: false
    }
  },
  mounted () {
    window.addEventListener("contextmenuEvent", e => {
      const { ev, contextmenu } = e.detail
      this.show(ev, contextmenu)
    })
  },
  methods: {
    itemClick (item, ev) {
      item.click && item.click(ev)
      this.hide()
    },
    hide (ev) {
      this.isShow = false

      // 移除事件
      window.removeEventListener('wheel', this.disableWheel)
      window.removeEventListener('blur', this.hide)

      window.removeEventListener('mousedown', this.hide)

      window.removeEventListener("contextmenuHideEvent", this.hide)
      // window.removeEventListener('mousedown', this.hide);
      // if (this.CKEditor) this.CKEditor.iFrameWindow.removeEventListener('mousedown', this.hide);
      // if (this.CKEditor) this.CKEditor.editorWindow.removeEventListener('mousedown', this.hide);
    },
    disableWheel (ev) {
      ev.preventDefault()
    },
    show (ev, contextmenu = []) {
      // 验证参数
      let res = contextmenu.every((value, index) => {
        return ('label' in value)
      })
      if (!res) throw new Error('请检查参数是否正确')

      // console.log(window.outerHeight, window.innerHeight, window.document.body.clientHeight)
      // console.log(window.innerHeight - window.document.body.clientHeight)
      let x = ev.screenX - window.screenX
      let y = ev.screenY - window.screenY - (window.outerHeight - window.innerHeight)
      let el = this.$refs.contextmenu

      this.isShow = true
      this.contextmenu = contextmenu

      this.$nextTick(() => {
        // 下面超出了窗体
        if (y > window.outerHeight - el.offsetHeight - 15) y = y - el.offsetHeight
        if (x > window.outerWidth - el.offsetWidth - 15) x = window.outerWidth - el.offsetWidth - 15

        el.style.top = y + 'px'
        el.style.left = x + 'px'
      })

      // 绑定事件
      window.addEventListener('blur', this.hide)// 窗体失去焦点事件
      window.addEventListener('wheel', this.disableWheel, { passive: false })

      window.addEventListener('mousedown', this.hide)

      window.addEventListener("contextmenuHideEvent", this.hide)
      // window.addEventListener('mousedown', this.hide);//鼠标按下事件
      // if (this.CKEditor) this.CKEditor.iFrameWindow.addEventListener('mousedown', this.hide); //富文本鼠标按下事件
      // if (this.CKEditor) this.CKEditor.editorWindow.addEventListener('mousedown', this.hide);//富文本编辑框鼠标按下事件
    }
  }
}
</script>

<style scoped>

.rootNode * {
  user-select: none;
}

.rootNode {
  position: fixed;
  background: white;
  box-shadow: #8f8f8f 0 0 9px 1px;
  top: 74px;
  z-index: 9999;
  overflow-y: auto;
  overflow-x: hidden;
  user-select: none;
}

.rootNode div {
  font-size: 13px;
  height: 28px;
  line-height: 28px;
  min-width: 120px;
  border: 1px #ddd solid;
  padding-left: 12px;
  padding-right: 12px;
  position: relative;
  overflow: hidden;
}

.rootNode div img {
  vertical-align: text-bottom;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  visibility: hidden;

}

.rootNode div img.box_show {
  visibility: visible;
}

.rootNode div:hover {
  background: #288ed3;
  color: white;
}

.rootNode.hide *,
.rootNode.hide {
  visibility: hidden !important;
}
</style>
